<!DOCTYPE html>
<html>
<head>
<title>Circular Motion Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="450"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Define parameters
    const centerX = 330;
    const centerY = 200;
    const radius = 110;
    const dotRadius = 6;

    // Helper function to draw a filled circle (dot)
    function drawDot(x, y, r, color) {
        ctx.beginPath();
        ctx.arc(x, y, r, 0, 2 * Math.PI, false);
        ctx.fillStyle = color;
        ctx.fill();
    }

    // --- Drawing starts here ---
    ctx.fillStyle = 'black';
    ctx.strokeStyle = 'black';

    // 1. Draw the dashed circular path
    ctx.beginPath();
    ctx.setLineDash([8, 7]);
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
    ctx.lineWidth = 2.5;
    ctx.stroke();
    ctx.setLineDash([]); // Reset to solid line

    // 2. Define and draw the dots on the circle
    const angles = {
        radiusEndPoint: 40,
        A: 90,
        nearB: 125,
        C: 180,
        D: 225,
        E: 270
    };

    const points = {};
    for (const key in angles) {
        const angleRad = angles[key] * Math.PI / 180;
        const x = centerX + radius * Math.cos(angleRad);
        const y = centerY - radius * Math.sin(angleRad); // Y is inverted in canvas coordinates
        points[key] = { x, y };
        drawDot(x, y, dotRadius, 'black');
    }

    // 3. Draw the radius line
    ctx.beginPath();
    ctx.moveTo(centerX, centerY);
    ctx.lineTo(points.radiusEndPoint.x, points.radiusEndPoint.y);
    ctx.lineWidth = 1.5;
    ctx.stroke();

    // 4. Draw the labels (A, B, C, D, E) inside the circle
    ctx.font = 'bold 36px serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    ctx.fillText('A', centerX, centerY - radius * 0.55);
    ctx.fillText('B', centerX - radius * 0.45, centerY - radius * 0.45);
    ctx.fillText('C', centerX - radius * 0.7, centerY);
    ctx.fillText('D', centerX - radius * 0.45, centerY + radius * 0.5);
    ctx.fillText('E', centerX + radius*0.05, centerY + radius * 0.65);

    // 5. Draw point P and its label
    const pX = 160;
    const pY = 190;
    drawDot(pX, pY, dotRadius + 1, 'red'); // Point P is red
    ctx.font = 'bold 36px serif';
    ctx.fillText('P', pX, pY + 40);

    // 6. Draw the caption at the bottom
    ctx.font = "bold 24px serif";
    ctx.textAlign = 'left';
    ctx.fillText("Figure for #11: overhead view of the mass's circular path.", 20, 420);

</script>
</body>
</html>